<template>
  <div class="flow-process-node__type-content">
    <div
      class="flow-process-node__type-group"
      v-for="(group, groupIndex) in addNodeTypeList"
      :key="groupIndex"
    >
      <div class="flow-process-node__type-group-name" v-if="group.name && group.list.length">{{ group.name }}</div>

      <div :class="['flow-process-node__type-list', group.list.length == 1 && group.type == 'custom' && addNodeTypeList[groupIndex+1].list.length == 0 ? 'flow-process-node__type-list_one': '']">
        <div
          :class="['flow-process-node__type-list-item', readonly ? 'cursor-default' : null, isDisabled(type, group) ? 'disabled': '' ]"
          v-for="(type, typeIndex) in group.list"
          :key="typeIndex"
          @click="onNodeTypeClick(type, group)"
        >
          <i :class="type.icon" :style="{ color: type.color }"></i>
          <span >{{type.title}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defaultNodeTypeList, store } from '../constant'

export default {
  name: 'biz-flow-process-node-type-content',

  props: {
    nodeList: {
      type: Array,
      default: [],
    },
    addNodeTypeList: {
      type: Array,
      default() {
        return defaultNodeTypeList
      }
    },
    showNodeTypePopover: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      readonly: store.readonly,
      defaultNodeTypeList
      }
  },
  methods: {
    /** 点击添加节点*/
    onNodeTypeClick(...args) {
      const [type, group ] = args;
      if(this.isDisabled(type, group)) return
      
      this.$emit('click', ...args)
    },
    /** 是否禁用 */
    isDisabled(type, group) {
      // 检查自定义和公共字段是否已经达到添加上限
      if(group.type === 'custom' || group.type === 'public') { 
        const customAndPublicNodes = this.nodeList.filter(item =>item.type === 'normal');
        if(customAndPublicNodes?.length >= 10) return true;
      }
      // 检查是否为内置字段，且已经添加过
      if (group.type === 'builtIn') {
        return this.nodeList.some(item => item.type === type.type);
      }
      // 检查是否是公共字段,且已经添加过
      if (group.type === 'public') {
        return this.nodeList.some(item=>item.id == type.id && type?.isCommon == 1);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.flow-process-node__type-content {
  padding: 12px 8px;
  // width: 300px;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  z-index: 9999999;

  .flow-process-node__type-group {
    width: 100%;
    margin-bottom: 12px;

    &:last-of-type {
      margin-bottom: 0;
    }

    &-name {
      color: #8C8C8C;
      margin-bottom: 12px;
      font-size: 12px;
    }

    .flow-process-node__type-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
 
      // justify-content: space-between;
      margin-bottom: -12px;

      &-item {
        display: flex;
        width: 208px;
        height: 40px;
        padding: 8px 12px;
        color: #262626;
        font-size: 14px;
        cursor: pointer;
        margin-bottom: 12px;
        align-items: center;
        border-radius: 8px;
        i{
          font-size: 16px;
          color: $color-primary;
        }
        span {
          display: block;
          margin-left: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &:hover {
          background: #F5F8FA;
        }
      }
      &_one {
        .flow-process-node__type-list-item {
          margin-bottom: 0px !important;
        }
      }
      .disabled {
        color: #BFBFBF;
        .iconfont {
          color: #BFBFBF;
        }
      }

    }
  }
}



//.node-select{
//  div{
//    display: inline-block;
//    margin: 5px 5px;
//    cursor: pointer;
//    padding: 10px 15px;
//    border: 1px solid #F8F9F9;
//    background-color: #F8F9F9;
//    border-radius: 10px;
//    width: 130px;
//    position: relative;
//    span{
//      position: absolute;
//      left: 65px;
//      top: 18px;
//    }
//    &:hover{
//      background-color: #fff;
//      box-shadow: 0 0 8px 2px #d6d6d6;
//    }
//    i{
//      font-size: 25px;
//      padding: 5px;
//      border: 1px solid #dedfdf;
//      border-radius: 14px;
//    }
//  }
//}
</style>
